<template>
<el-card class="box-card quick-card">
    <div slot="header" class="clearfix box-card-header quick-card-header ">
        <span>快捷回复</span>
    </div>
    <div class="quick-plane">
        <div @click="quickClick(reply)" class="quick-item" v-for="(reply, index) in replies" :key="index">
            <div class="quick-item-createtime" style="text-align:right">
                <i @click.stop="deleteReply(reply)" class="el-icon-close quick-item-close"></i>
            </div>
            <messageCard :message="reply" />
        </div>
    </div>
    <div class="quick-footer">
        <message-button-group 
        :csid="csid"
        :wxid="wxid"
        @create="create"
      /> 
    </div>
    
</el-card>      
</template>
<script>
import messageButtonGroup from '@/components/message-button-group'
import messageCard from '@/components/message-card'
export default {
    name:"quickReplies" ,
    components:{ messageButtonGroup,messageCard },
     props:{
        csid:{
            type:Number,
            default:0
        },
        wxid:{
            type:String,
            default:""
        }
    },
    data(){
        return {
            replies:[]
        }
    },
    mounted(){
        if(this.csid != -1)
            this.getReplies(this.csid,this.wxid)    
    },

    watch:{
        csid(val,oldVal){
            if(val!==oldVal &&val&& val!= -1){
                this.getReplies(this.csid,this.wxid)
            }
        },
        wxid(val,oldVal){
            if(val!==oldVal &&val){
                this.getReplies(this.csid,this.wxid)   
            }
        }    
    },
    methods:{
        getReplies(csId,wxAccount) {
            if(!csId)return;
            this.$api.phrase.getReplyPhrase({ csId,pageSize:50 }).then((data)=>{
                if(data && data[0]){
                const replys = data.map(item=>{
                    try {
                        const rp = JSON.parse(item.msgExtra)
                        rp.id = item.id
                        return rp  
                    } catch (error) {
                    return {}   
                    }
                }) 
                this.replies = replys
                }
                
            }).catch(e=>this.$msg(e))
        },
        // edit
        async addPhrase(csid,message){
            delete message.id
            delete message.createtime
            delete message.localid
            return this.$api.phrase.saveReplyPhrase({
                csId:csid,
                msgType:message.msgtype,
                msgExtra:JSON.stringify(message),
                msgContent:''
            }) 
        },
        async deleteReply(reply) {
            return  this.$api.phrase.deleteReplyPhase(reply).then((data)=>{
                this.replies = this.replies.filter(r=>r.id!==reply.id)
            }).catch(e=>this.$msg(e))
        },
        quickClick(reply){
            this.$emit('click',reply)
        },
        create(message){
            if(this.replies.length >=50){
                return this.$message({
                    showClose: true,
                    message: '快捷回复最多添加50条记录，请整理后继续添加',
                    type: 'error'
                });
            }
            this.addPhrase(this.csid,message).then(rs=>{
                message.id = rs.id
                this.replies.unshift(message)
            })
            
        }
    }  
}
</script>
<style scoped>
.quick-card{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.quick-card >>> .el-card__body{
    height: 100%;
    display: flex;
    flex-direction: column; 
    padding:0!important;
}
.quick-plane{
    height: 100%;
    overflow: auto;
    padding: 0 10px;
    background: #f1f1f1;
}
.quick-item{
    padding: 10px 16px;
    background-color: #fff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 5px 0;  
    cursor: pointer; 
    box-shadow: 0px 1px 1px 1px #ddd;
    transition:transform 200ms;
    padding-right: 10px;
}
.quick-footer{
    border-top: 1px solid #EBEEF5;
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.quick-item-close{
    font-size: 18px
}
.quick-item-close:hover{
    color: #fff;
    background: #50bfff;
    border-radius: 16px;
}
</style>